Angular Material এর MatMenu কম্পোনেন্ট একটি অত্যন্ত গুরুত্বপূর্ণ UI উপাদান যা মেনু তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের বিভিন্ন অপশন বা অ্যাকশন নির্বাচন করার জন্য একটি ড্রপডাউন মেনু তৈরি করতে সাহায্য করে। মেনু কম্পোনেন্টটি একটি ইন্টারেকটিভ এবং কাস্টমাইজেবল উপাদান হিসেবে কাজ করে, যা আপনার অ্যাপ্লিকেশনে ন্যাভিগেশন বা অপশন প্রদর্শনের জন্য ব্যবহার করা হয়।

MatMenu এর বৈশিষ্ট্য

• ড্রপডাউন মেনু: মেনু উপাদানটি মাউস বা কিবোর্ড ইন্টারঅ্যাকশনের মাধ্যমে প্রদর্শিত হয়।
• আইকন সহ অপশন: মেনু অপশনগুলিতে আইকন যুক্ত করা যায়।
• সাব-মেনু সাপোর্ট: একটি মেনুর ভিতরে আরেকটি সাব-মেনু থাকতে পারে।
• ট্রিগার ইভেন্ট: মেনু প্রদর্শনের জন্য টগল, হোভার বা ক্লিক ইভেন্ট ব্যবহার করা যায়।

MatMenu তৈরি করা

MatMenu তৈরি করতে, প্রথমে MatMenuModule ইমপোর্ট করতে হবে এবং তারপরে মেনু কম্পোনেন্ট ব্যবহার করতে হবে।

১. app.module.ts ফাইলে MatMenuModule ইমপোর্ট করা

import { MatMenuModule } from '@angular/material/menu';

@NgModule({
  imports: [MatMenuModule],
})
export class AppModule {}

২. HTML-এ MatMenu ব্যবহার করা

এখানে একটি সাধারণ MatMenu উদাহরণ দেওয়া হলো, যেখানে একটি বাটন ক্লিক করার মাধ্যমে মেনু প্রদর্শিত হবে।

<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

• [matMenuTriggerFor]: এটি নির্ধারণ করে যে কোন উপাদানটি মেনু প্রদর্শনের জন্য ট্রিগার করবে।
• #menu="matMenu": এটি মেনুকে একটি টেমপ্লেট রেফারেন্স ভেরিয়েবল হিসেবে ঘোষণা করে, যা মেনু অপশনগুলো ধারণ করে।
• mat-menu-item: এটি মেনু অপশনকে স্টাইল করে এবং তাদেরকে ক্লিকযোগ্য বানায়।

MatMenu তে সাব-মেনু (Sub-menu)

আপনি MatMenu এর ভিতরে সাব-মেনু যুক্ত করতে পারেন, যা আরো নেস্টেড অপশন প্রদান করে।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

<mat-menu #subMenu="matMenu">
  <button mat-menu-item>Sub-option 1</button>
  <button mat-menu-item>Sub-option 2</button>
</mat-menu>

এখানে [matMenuTriggerFor]="subMenu" সাব-মেনু ট্রিগার করার জন্য ব্যবহার করা হয়েছে, যা মেনুর মধ্যে একটি সাব-মেনু তৈরি করে।

MatMenu এর ইভেন্ট হ্যান্ডলিং

MatMenu কম্পোনেন্টে কিছু ইভেন্ট হ্যান্ডলিং রয়েছে যা আপনি ইন্টারঅ্যাকশন ট্র্যাক করতে ব্যবহার করতে পারেন। যেমন, মেনু অপশন ক্লিক করার পরে একটি ইভেন্ট ট্রিগার করতে পারেন।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu" (menuClosed)="onMenuClosed()">
  <button mat-menu-item (click)="onOptionClick('Option 1')">Option 1</button>
  <button mat-menu-item (click)="onOptionClick('Option 2')">Option 2</button>
  <button mat-menu-item (click)="onOptionClick('Option 3')">Option 3</button>
</mat-menu>

export class AppComponent {
  onMenuClosed() {
    console.log('Menu closed');
  }

  onOptionClick(option: string) {
    console.log(option + ' selected');
  }
}

এখানে menuClosed ইভেন্ট ব্যবহার করে মেনু বন্ধ হওয়ার পরে কোনো কার্যকলাপ পরিচালনা করা হয় এবং click ইভেন্টের মাধ্যমে মেনু অপশনের উপর ক্লিক করার পর কার্যকলাপ সঞ্চালিত হয়।

MatMenu এর অপশন কাস্টমাইজেশন

আপনি MatMenu তে আইকন, টেক্সট এবং ডিভাইডার সহ আরও কাস্টমাইজেশন করতে পারেন।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item><mat-icon>home</mat-icon> Home</button>
  <button mat-menu-item><mat-icon>settings</mat-icon> Settings</button>
  <mat-divider></mat-divider>
  <button mat-menu-item><mat-icon>exit_to_app</mat-icon> Logout</button>
</mat-menu>

• <mat-icon>: এটি মেনু অপশনে আইকন যুক্ত করার জন্য ব্যবহৃত হয়।
• <mat-divider>: এটি মেনু অপশনগুলোর মধ্যে ডিভাইডার তৈরি করে, যা ভিজ্যুয়ালভাবে অপশনগুলোকে আলাদা করে।

MatMenu এর রঙ কাস্টমাইজেশন

আপনি MatMenu এর রঙ এবং স্টাইল কাস্টমাইজ করতে চাইলে CSS ব্যবহার করতে পারেন। এটি Angular Material এর থিমিং সিস্টেমের অংশ হিসেবে কাজ করে।

উদাহরণ:

::ng-deep .mat-menu-panel {
  background-color: #2e3b4e;
  color: white;
}

::ng-deep .mat-menu-item {
  font-size: 16px;
}

• ::ng-deep: এটি স্টাইল শীটকে Angular কম্পোনেন্টের বাইরে ট্যাগগুলোর উপর প্রয়োগ করতে ব্যবহৃত হয়।

Angular Material এর MatMenu কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য মেনু তৈরি করতে সাহায্য করে, যা অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাকটিভ এবং কার্যকরী মেনু প্রদর্শন করতে ব্যবহৃত হয়। MatMenu এর মাধ্যমে আপনি সাব-মেনু, আইকন, ডিভাইডার এবং ক্লিক ইভেন্ট সহ মেনু অপশন কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।

Angular Material এর Material Menu কম্পোনেন্ট একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যা ইউজার ইন্টারফেসে বিভিন্ন অপশন বা কমান্ড প্রদর্শন করে। এটি mat-menu ট্যাগ ব্যবহার করে তৈরি করা হয় এবং সাধারণত বিভিন্ন অ্যাকশন বা অপশন নির্বাচন করার জন্য ব্যবহার করা হয়।

Angular Material মেনু সাধারণত MatMenuModule দ্বারা নিয়ন্ত্রিত হয় এবং এটি ব্যবহারকারীকে একাধিক অপশন প্রদর্শন করতে সহায়তা করে। মেনু কম্পোনেন্টটি বেশিরভাগ সময় button, icon button, বা menu trigger দ্বারা ট্রিগার করা হয়।

Material Menu এর বৈশিষ্ট্য

• MatMenuModule ব্যবহার করে মেনু তৈরি করা হয়।
• মেনু আইটেমগুলিকে mat-menu-item এর মাধ্যমে প্রতিটি অপশন বা আইটেম তৈরি করা হয়।
• মেনু কাস্টমাইজ করা যায় এবং বিভিন্ন রকমের অ্যাকশন বা অপশন দেখানোর জন্য ব্যবহৃত হয়।
• এটি সাধারণত একটি button বা icon এর মাধ্যমে ট্রিগার করা হয়।
• মেনু ত্রিগার করার জন্য ব্যবহার করা যেতে পারে mat-button, mat-icon-button, ইত্যাদি।

Material Menu ব্যবহার করার ধাপসমূহ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatMenuModule এবং MatButtonModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে।

import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatMenuModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. Material Menu তৈরি করা

mat-menu কম্পোনেন্টটি একটি mat-button বা mat-icon-button এর সাথে যুক্ত থাকে, যা মেনু ট্রিগার করতে ব্যবহৃত হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

এখানে:

• [matMenuTriggerFor]="menu": এটি বাটন বা অন্য কোনো এলিমেন্টকে মেনু টিগার করতে ব্যবহার করা হয়।
• <mat-menu>: এটি মেনু কনটেইনার, যেখানে আপনার অপশনগুলো থাকবে।
• <mat-menu-item>: এটি মেনু আইটেম বা অপশন, যা ব্যবহারকারী নির্বাচন করতে পারে।

৩. আইকন এবং সাব-মেনু (Sub-menu) ব্যবহার করা

Angular Material মেনুতে আপনি আইকন এবং সাব-মেনু তৈরি করতে পারেন। একটি সাব-মেনু তৈরি করতে, মেনু আইটেমের মধ্যে একটি আরেকটি মেনু ব্যবহার করা হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>Option 1</button>
  <button mat-menu-item>Option 2</button>
  <mat-menu #subMenu="matMenu">
    <button mat-menu-item>Sub Option 1</button>
    <button mat-menu-item>Sub Option 2</button>
  </mat-menu>
  <button mat-menu-item [matMenuTriggerFor]="subMenu">Sub Menu</button>
</mat-menu>

এখানে:

• Sub-menu তৈরি করার জন্য একটি mat-menu কম্পোনেন্ট আবার ব্যবহার করা হয়েছে এবং এটি matMenuTriggerFor এর মাধ্যমে ট্রিগার করা হয়েছে।

৪. মেনু আইটেমের ইভেন্ট হ্যান্ডলিং

mat-menu-item এর মাধ্যমে ব্যবহারকারীর ক্লিক ইভেন্ট হ্যান্ডল করতে পারেন। এটি সাধারণত click ইভেন্টের মাধ্যমে পরিচালিত হয়।

উদাহরণ:

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="onOptionClick('Option 1')">Option 1</button>
  <button mat-menu-item (click)="onOptionClick('Option 2')">Option 2</button>
  <button mat-menu-item (click)="onOptionClick('Option 3')">Option 3</button>
</mat-menu>

export class AppComponent {
  onOptionClick(option: string) {
    console.log(option + ' clicked!');
  }
}

এখানে:

• (click)="onOptionClick('Option 1')"`: এই ইভেন্ট হ্যান্ডলারটি যখন ব্যবহারকারী একটি মেনু অপশন ক্লিক করবেন তখন কল হবে এবং অপশনটি কনসোলে প্রিন্ট হবে।

৫. Material Menu Styling

Angular Material Menu কম্পোনেন্টটির স্টাইলিং কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, আপনি মেনুর ব্যাকগ্রাউন্ড রঙ বা বর্ডার পরিবর্তন করতে পারেন:

উদাহরণ:

::ng-deep .mat-menu-panel {
  background-color: #f0f0f0;
  border-radius: 8px;
}

এখানে:

• ::ng-deep: এটি স্টাইল প্রোপার্টি কোডের মধ্যে encapsulation সরিয়ে দেয়, যা উপাদানটি বাইরে থেকে স্টাইল করার সুযোগ দেয়।

Angular Material Menu একটি শক্তিশালী এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট যা আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সহজ নেভিগেশন প্রদান করে। mat-menu, mat-menu-item, এবং matMenuTriggerFor এর মাধ্যমে আপনি সহজেই বিভিন্ন অপশন এবং সাব-মেনু তৈরি করতে পারবেন। Angular Material এর মেনু কম্পোনেন্টটি স্টাইলিং এবং ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আরও ইন্টারঅ্যাকটিভ করা যায়, যা অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসে আধুনিক এবং পেশাদার লুক যোগ করে।

Angular Material এর Nested Menu একটি শক্তিশালী উপাদান, যা একটি মেনুর মধ্যে আরো একটি সাবমেনু (sub-menu) তৈরি করার সুযোগ দেয়। এটি সাধারণত একাধিক স্তরের মেনু এবং সাবমেনু প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি প্রধান মেনু এবং তার অধীনে আরো অপশনগুলোর মেনু। এটি অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয়, বিশেষ করে যেখানে অনেক অপশন এবং সাব-অপশন থাকে।

এখানে Angular Material এর মাধ্যমে একটি Nested Menu তৈরি করার প্রক্রিয়া দেওয়া হলো।

প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatMenuModule এবং MatButtonModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এগুলো হল মেনু তৈরি করার জন্য প্রয়োজনীয় কম্পোনেন্ট।

import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatMenuModule,
    MatButtonModule,
    MatIconModule
  ]
})
export class AppModule { }

HTML টেমপ্লেট: নেস্টেড মেনু তৈরি করা

এখন আমরা mat-menu কম্পোনেন্ট ব্যবহার করে একটি Nested Menu তৈরি করবো। নীচের কোডে, একটি প্রধান মেনু তৈরি করা হয়েছে, এবং এর মধ্যে কিছু সাবমেনু রয়েছে:

<button mat-button [matMenuTriggerFor]="menu">Main Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">Option 2</button>
  <button mat-menu-item>Option 3</button>
</mat-menu>

<mat-menu #subMenu1="matMenu">
  <button mat-menu-item>Sub Option 1.1</button>
  <button mat-menu-item>Sub Option 1.2</button>
  <button mat-menu-item>Sub Option 1.3</button>
</mat-menu>

<mat-menu #subMenu2="matMenu">
  <button mat-menu-item>Sub Option 2.1</button>
  <button mat-menu-item>Sub Option 2.2</button>
</mat-menu>

এখানে:

• mat-menu: মূল মেনু এবং সাবমেনুর জন্য ব্যবহার করা হচ্ছে।
• [matMenuTriggerFor]: এই ডিরেকটিভটি মেনু ট্রিগার করতে ব্যবহৃত হয়, অর্থাৎ কোন বাটনের জন্য মেনু প্রদর্শিত হবে তা নির্ধারণ করে।
• #menu, #subMenu1, #subMenu2: মেনু উপাদানগুলির জন্য রেফারেন্স তৈরি করা হচ্ছে।

নেস্টেড মেনুর জন্য CSS কাস্টমাইজেশন

Angular Material ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে Nested Menu এর জন্য কাস্টম CSS স্টাইলও অ্যাড করতে পারেন। যেমন, সাবমেনুতে কিছু অতিরিক্ত স্পেস বা আলাদা রং দেয়া।

mat-menu {
  min-width: 200px;
}

mat-menu button {
  padding: 8px;
}

mat-menu .mat-menu-item {
  font-size: 14px;
}

mat-menu .mat-menu-panel {
  background-color: #f9f9f9;
}

এই CSS কোডে আমরা মেনুর মিনিমাম প্রস্থ, বাটনের প্যাডিং, ফন্ট সাইজ, এবং ব্যাকগ্রাউন্ড রং কাস্টমাইজ করেছি।

নেস্টেড মেনুতে আইকন যুক্ত করা

Angular Material এর MatIconModule ব্যবহার করে আপনি মেনুতে আইকনও যুক্ত করতে পারেন। এটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।

<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">
    <mat-icon>home</mat-icon> Option 1
  </button>
  <button mat-menu-item [matMenuTriggerFor]="subMenu2">
    <mat-icon>settings</mat-icon> Option 2
  </button>
  <button mat-menu-item>
    <mat-icon>help</mat-icon> Option 3
  </button>
</mat-menu>

এখানে আমরা mat-icon ট্যাগ ব্যবহার করেছি, যা প্রতিটি মেনু আইটেমের জন্য আইকন প্রদর্শন করে।

নেস্টেড মেনুতে কাস্টম আচরণ

আপনি Angular Material এর mat-menu কম্পোনেন্টের মাধ্যমে মেনুর আচরণও কাস্টমাইজ করতে পারেন। যেমন, মেনুর অবস্থান, অ্যানিমেশন ইফেক্ট, অথবা মেনু ওপেন এবং ক্লোজ করার সময় ইভেন্ট হ্যান্ডলিং করা।

মেনু পজিশন কাস্টমাইজ করা

<mat-menu #menu="matMenu" xPosition="before" yPosition="below">
  <button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
</mat-menu>

এখানে xPosition="before" এবং yPosition="below" দিয়ে মেনুর পজিশন নির্ধারণ করা হয়েছে।

মেনু ওপেন-কলোজ ইভেন্ট হ্যান্ডলিং

openMenu() {
  this.menu.open();
}

closeMenu() {
  this.menu.close();
}

এখানে আমরা মেনু ওপেন এবং ক্লোজ করার জন্য একটি ফাংশন তৈরি করেছি।

Angular Material Nested Menu একটি অত্যন্ত কার্যকরী কম্পোনেন্ট যা ব্যবহারকারীদের জন্য একাধিক স্তরের মেনু এবং সাবমেনু তৈরি করতে সহায়ক। এটি mat-menu এবং mat-menu-item এর মাধ্যমে খুব সহজেই ইমপ্লিমেন্ট করা যায় এবং একাধিক স্তরের মেনু তৈরি করতে [matMenuTriggerFor] ব্যবহার করা হয়। Angular Material এর সাহায্যে আপনি মেনুর স্টাইলিং, আচরণ এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে।